<template>
	<!-- 物资管理列表 -->
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item" style="position: absolute;left: 0;right: 0;margin: auto;width: 50%;">物资管理</view>
					<view class="flex-item flex-right" style="position: absolute;right: 22px;" @click="showDrawer">
						<uni-icon type="bars" size="24" color="#ffffff"></uni-icon>
					</view>
				</uni-nav-bar>
			</view>

			<!--筛选条件-->
			<uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item">
						<uni-search @searchData="searchData" :listData="drawerData" :listParam="listParam" :changeResult="true" @changeDrawData="changeDrawData"></uni-search>
					</view>
				</scroll-view>
			</uni-drawer>

			<view>
				<view class="supply-search">
					<input type="text" value="" class="search-container" placeholder="请输入物资种类" />
					<view class="item" v-for="(value, index) in iconType" :key="index"><uni-icon :type="value" :size="24" color="#A0A0A0" class="listsearch"></uni-icon></view>
					<view class="right-ly"></view>
				</view>
				<!-- 分页内容展示 -->
				<navigator class="supply-list" :url="'supply-manage-detail?id=' + listData[index].id" style="flex: 1;" v-for="(item, index) in listData" :key="index">
					<view class="supply-option">
						<view class="option-zl">物资种类</view>
						<view class="option-wa">{{ item.name }}</view>
						<view class="option-right">
							<image :src="item.inventory < item.threshold ? '../../../static/images/sosred.png' : '../../../static/images/sosgreen.png'" mode=""></image>
						</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">单位</view>
						<view class="option-wa">{{ item.unit }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">库存</view>
						<view class="option-wa">{{ item.inventory }}</view>
					</view>
					<view class="supply-option">
						<view class="option-zl">存放位置</view>
						<view class="option-wa">{{ item.roomRowGuid }}</view>
					</view>
				</navigator>

				<!-- 使用组件 -->
				<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
// 1.引入组件 uni-load-more.vue
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
// 2.引入组件 uni-search.vue
import uniSearch from '@/components/uni-search/uni-search.vue';
import tools from '@/common/tools-new.js';

export default {
	data() {
		return {
			iconType: ['search'],
			showRight: false,
			listParam: {
				parameter: '',
				operators: '',
				queryValue: '',
				pageSize: 8,
				pageIndex: 1,
				orderBy: '',
				orderByType: ''
			},
			scrollTop: 0,
			old: {
				scrollTop: 0
			},

			//列表分页数据源
			listData: [],

			//抽屉数据集合
			drawerData: [],

			//房间数据集合
			listRoomsData: [],

			//加载方式文字提示
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},

			objData: [], //所有待处理对象

			//定义加载方式
			loadingType: 'more'
		};
	},
	components: {
		uniDrawer,
		uniNavBar,
		uniIcon,
		uniLoadMore, //注册组件
		uniSearch //搜索条件
	},
	methods: {
		hide() {
			this.showRight = false;
		},

		//抽屉数据
		getDrawList() {
			this.$api.SupplyManage.SupplyChoose()
				.then(res => {
					// console.log(res);
					this.drawerData = res[1].data.result;
				})
				.catch(res => {
					//失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		//展开抽屉
		showDrawer() {
			this.showRight = true;
		},

		//关闭抽屉
		closeDrawer() {
			this.showRight = false;
		},

		confirm() {},

		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		// 加载数据，请求调用接口
		getDataList() {
			//显示加载动画
			this.loadingType = 'more';
			uni.showNavigationBarLoading();
			this.$api.SupplyManage.ShowData(this.listParam)
				.then(res => {
					// console.log(res)
					//判断是否有无数据
					var list = res[1].data.result.items;
					this.listData = list; //返回数据赋值给定义的名称---list
					this.listData.forEach(ele => {
						ele.roomRowGuid = this.objData.find(e => e.id == ele.roomRowGuid) == undefined ? '--' : this.objData.find(e => e.id == ele.roomRowGuid).roomName;
					});

					if (list.length == 0) {
						this.listData = [];
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					//如有数据，关闭动画
					uni.hideNavigationBarLoading();
					//得到数据后停止刷新
					uni.stopPullDownRefresh();
				})
				.catch(res => {
					//接口请求失败
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		//初始化房间数据
		getRommList() {
			this.$api.SupplyManage.GetRoomName()
				.then(res => {
					console.log(res);
					this.objData = res[1].data.result;
				})
				.catch(res => {
					//接口请求失败
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		//检索条件
		searchData(infoData) {
			this.showRight = false;
			this.listParam = infoData;
			this.listParam.pageIndex = 1;
			this.getDataList();
		},
		//重新请求接口获取抽屉数据
		changeDrawData(roomTypeRowGuid) {
			console.log(roomTypeRowGuid);
			let param = {
				roomtyperowguid: roomTypeRowGuid
			};
			//抽屉数据重新赋值
			this.$api.SupplyManage.SupplyChoose(param).then(res => {
				this.drawerData = res[1].data.result;
			});
		},
		//加载更多列表
		getMoreDataList() {
			this.listParam.pageIndex++;
			//loadingType!=more;直接返回
			if (this.loadingType != 'more') {
				return false;
			}
			this.loadingType = 'loading';
			//显示加载动画
			uni.showNavigationBarLoading();
			//请求接口
			this.$api.SupplyManage.ShowData(this.listParam)
				.then(res => {
					if (this.listData.length == res[1].data.result.totalCount) {
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					var list = res[1].data.result.items;
					list.forEach(ele => {
						ele.roomRowGuid = this.objData.find(e => e.id == ele.roomRowGuid) == undefined ? '--' : this.objData.find(e => e.id == ele.roomRowGuid).roomName;
					});
					this.listData = this.listData.concat(list);
					//将loadingType归more重置
					this.loadingType = 'more';
					//关闭加载动画
					uni.hideNavigationBarLoading();
				})
				.catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},
	},
	/**
	 * 初次加载数据
	 * */
	onLoad: async function() {
		await this.getRommList();
		this.getDataList();
		this.getDrawList();
	},

	//下拉刷新请求一次数据
	onPullDownRefresh: function() {
		this.listParam.pageIndex = 1;
		this.getDataList();
	},

	//触底的时候请求数据，即为上拉加载更多
	onReachBottom: function() {
		//console.log("onReachBottom")
		var timer = null;
		var _this = this;
		if (timer != null) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			_this.getMoreDataList();
		}, 1000);
	},

	onNavigationBarButtonTap(e) {
		this.showRight = !this.showRight;
	},
	onBackPress() {
		if (this.showRight) {
			this.hide();
			return true;
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f2f2f2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.uni-navbar__header-btns {
	padding: 0;
}

.example-body {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.supply-search {
	width: 94%;
	height: 36px;
	border-radius: 17px;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 15px;
	position: relative;
	overflow: hidden;
}

.supply-search .search-container {
	width: 76%;
	height: 36px;
	margin: 0 auto;
	background-color: #ffffff;
	font-size: 14px;
	color: #999999;
	position: absolute;
	top: 0;
	left: 42px;
}

.supply-search .search-item {
	position: absolute;
	left: 14px;
	top: 10px;
}

.supply-search .right-ly {
	width: 12px;
	height: 17px;
	float: right;
	background: url(../../../static/images/chartly.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 10px;
	right: 16px;
}

.supply-list {
	width: 94%;
	background-color: #ffffff;
	border-radius: 3px;
	margin: 0 auto;
	margin-top: 11px;
}

.supply-list .supply-option {
	width: 94%;
	padding: 16px 0px;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 auto;
	font-size: 16px;
	overflow: hidden;
}

.supply-option .option-zl {
	width: 80px;
	float: left;
	color: #666666;
}

.supply-option .option-wa {
	float: left;
	margin-left: 19px;
	color: #000000;
}

.supply-option .option-right {
	width: 50px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: right;
	margin-right: 1px;
}

.supply-option .option-right image {
	max-width: 96%;
	max-height: 100%;
}

.show-box .input.data-v-3b0702b8 {
	font-size: 12px;
}

.uni-title .draw-choose {
	width: 80%;
	height: 30px;
	margin: 0 auto;
	margin-top: 60px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	margin-bottom: 60px;
}

.uni-title .draw-choose .draw-chooseone {
	width: 46%;
	height: 100%;
	border: 1px solid #458cd0;
	border-radius: 2px;
	color: #458cd0;
	float: left;
}

.uni-title .draw-choose .draw-choosetwo {
	width: 46%;
	height: 100%;
	border: 1px solid #458cd0;
	background: #458cd0;
	color: #ffffff;
	border-radius: 2px;
	float: right;
}

input {
	min-height: inherit;
}

.flex-right {
	text-align: right;
	/* padding-right: 4%; */
}

.listsearch {
	padding: 0;
	position: absolute;
	top: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
}

uni-scroll-view {
	height: 1000px;
}
</style>
